<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        正文
    </title>
    <link rel="shortcut icon" href="./img/logo.jpg">
    <link rel="stylesheet" href="css/blog.css">
    <link rel="stylesheet" href="css/blog_content.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="./img/logo.jpg" alt="">
        <span class="title">博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">创作</a>
        <a href="javascript:void(0);" onclick="logout()">注销</a>
    </div>

    <script>
        function logout() {
            $.ajax({
                url: 'user/logout',//请求地址
                type: "GET",//请求方法
                data: $('#form').serialize(),  //表单数据
                datatype: "json",//数据类型为json，你自己看你后端要接收什么类型的数据
                success: function (result) {
                    // 根据你返回的数据自己改
                    if (result.code == 200) {
                        location.assign('login.html');  //跳转地址
                    } else {
                        alert(result.data);
                    }
                }
            });
        }
    </script>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="./img/头像.jpg" alt="">
                <h3></h3>
            </div>
        </div>
        <!-- 右侧文章内容 -->
        <div class="container-right">
            <div class="blog-content">
                <h3></h3>
                <div class="date"></div>
                <div id="content" style="background-color:transparent"></div>
            </div>
        </div>
    </div>
    <!-- 在这个页面加载的时候, 给服务器发送 ajax 请求, 获取到博客的详细内容, 并在页面上进行显示 -->
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script>
        //1.通过ajax来给服务器发送获取博客列表的请求
        $.ajax({
            method: 'GET',
            //location.search来获取blogId
            url: 'blog/selectOne' + location.search,
            success: function (data, status) {
                if (data.code == 200) {
                    buildBlog(data.data);
                } else {
                    alert(data.data);
                }
            },
            error: function (data, status) {
                alert("您当前尚未登录");
                location.assign('login.html');
            }
        });
        //2.根据服务器返回的JSON对象,构造出页面内容
        function buildBlog(blog) {
            //a.设置博客的标题
            let titleDiv = document.querySelector('.blog-content>h3');
            titleDiv.innerHTML = blog.title;
            //b.设置发布的日期
            let dateDiv = document.querySelector('.blog-content>.date');
            dateDiv.innerHTML = formatDate(blog.postTime);
            //c.以markdown方式设置博客的正文
            editormd.markdownToHTML('content', { markdown: blog.content });
        }
        //3.格式化时间
        function formatDate(timeStampMS) {
            var date = new Date(timeStampMS);
            //通过data里的方法，获取时间的年月日等信息
            var year = date.getFullYear(),
                //月份是从0开始的
                month = date.getMonth() + 1,
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var newTime = year + '-' +
                (month < 10 ? '0' + month : month) + '-' +
                (day < 10 ? '0' + day : day) + ' ' +
                (hour < 10 ? '0' + hour : hour) + ':' +
                (min < 10 ? '0' + min : min) + ':' +
                (sec < 10 ? '0' + sec : sec);
            return newTime;
        }

        //1.通过ajax来给服务器发送获取当前用户的登录状态的请求
        $.ajax({
            //location.search来获取blogId
            url: 'user/getWriter' + location.search,
            method: 'GET',
            success: function (data, status) {
                if (data.code == 200) {
                    setUser(data.data);
                } else if (data.code == -2) {
                    location.assign('login.html');
                } else {
                    alert(data.data);
                }
            }
        });
        //2.根据响应中的body数据,构造HTML内容
        function setUser(user) {
            let h3 = document.querySelector('.card>h3');
            h3.innerHTML = user.username;
            //如果是自己的博客,就要显示删除按钮
            if (user.yourBlog) {
                let navDiv = document.querySelector('.nav');
                let delButton = document.createElement('a');
                delButton.innerHTML = '删除';
                //通过a标签的href只能触发GET请求.此处我们需要的是DELETE请求
                //给a标签加上个点击回调.在这里面通过ajax来实现DELETE请求
                delButton.href = '#';
                navDiv.appendChild(delButton);
                delButton.onclick = deleteBlog;
            }
        }
        //3.点击事件发生，发送删除请求
        function deleteBlog() {
            //通过ajax来构造DELETE请求
            $.ajax({
                url: 'blog/delete' + location.search,
                type: 'DELETE',
                success: function (data, status) {
                    if (data.code == 200) {
                        location.assign('blog_list.html');
                    } else {
                        alert(data.data);
                    }
                },
                error: function (data, status) {
                    alert("您当前尚未登录");
                    location.assign('login.html');
                }
            })
        }
    </script>
</body>

</html>